'use strict';

import Base from './base';
import React from 'react';
import {
    Http
} from '../lib';
import {
    API,
    IMG
} from '../res';
import {browserHistory} from 'react-router';
import {
    UCheck,
    ButtonGroup,
    Button,
    Grid,
    Col,
    Input
} from 'amazeui-react';


import styles from '../../css/login.css';
// 引入 ECharts 主模块
import ECharts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
//引入饼状图
import 'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

export default class  extends Base {
    constructor(props){
        super(props);
        this.state = {
            planCount:[],
            inspectionCount:[],
            feedbackCount:[],
            rectifyInformCount:[],
            planCountNav:true,
            inspectionCountNav:false,
            feedbackCountNav:false,
            rectifyInformCountNav:false,
            yValue:'2018'
        }
        
        this.setYear=this.setYear.bind(this);
    }
    

    	setYear(e){
    		this.setState({
    			yValue:e.target.value
    		});
    		
    		  		        // 基于准备好的dom，初始化echarts实例
        var myChartNoe = ECharts.init(document.getElementById('mainNow'));
        // 基于准备好的dom，初始化echarts实例
        var myChartTow = ECharts.init(document.getElementById('mainTow'));
        // 基于准备好的dom，初始化echarts实例
        var myChartThree = ECharts.init(document.getElementById('mainThree'));
        myChartNoe.showLoading();
        myChartTow.showLoading();
        myChartThree.showLoading();
        Http.get(API.statisticsRnspection,data=> {
            var planCount = [];
            var inspectionCount = [];
            var feedbackCount = [];
            var rectifyInformCount = [];
            for (var i = 0; i < data.data.list.length; i++) {
                planCount.push(data.data.list[i].planCount);
                inspectionCount.push(data.data.list[i].inspectionCount);
                feedbackCount.push(data.data.list[i].feedbackCount);
                rectifyInformCount.push(data.data.list[i].rectifyInformCount);
            }
            this.setState({
                planCount: planCount,
                inspectionCount: inspectionCount,
                feedbackCount: feedbackCount,
                rectifyInformCount: rectifyInformCount
            });
            this.barList(this.state.planCount)
        });
        // 基于准备好的dom，初始化echarts实例
        var theme = ECharts.init(document.getElementById('theme'));
        var singlePlan = ECharts.init(document.getElementById('singlePlan'));
        theme.showLoading();
        singlePlan.showLoading();
        Http.get(API.statisticsDetailcount,data=>{
            var dataTheme = data.data.list.theme;
            var DataSinglePlan = data.data.list.singlePlan;
            var singlePlanTitleData = [];
            var singlePlanData = [];
            var themeTitleData = [];
            var themeData = [];
            for(var i = 0 ; i < dataTheme.length ; i++){
                var obj = new Object();
                var planObj = new Object();
                planObj.value = DataSinglePlan[i].count;
                planObj.name = DataSinglePlan[i].actionPersonName;
                singlePlanTitleData.push(DataSinglePlan[i].actionPersonName);
                singlePlanData.push(planObj);
                obj.value = dataTheme[i].count;
                obj.name = dataTheme[i].themeName;
                themeData.push(obj);
                themeTitleData.push(dataTheme[i].themeName);
            };
            console.log(themeTitleData);
            theme.hideLoading();
            singlePlan.hideLoading();
            theme.setOption({
                title : {
                    text: '工作计划中的主题',
                    x:'67%',
                    y:'bottom',
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: themeTitleData,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'normal'
                    }
                },
                label: {
                    normal: {
                        formatter: "{d}%",
                        show: true,
                        fontSize: '24',
                    }
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['77%', '40%'],
                        data:themeData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        x:'100'
                    }
                ]
            });
            singlePlan.setOption({
                title : {
                    text: '个人工作记录最多的10位督学',
                    x:'25%',
                    y:'bottom',
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: singlePlanTitleData,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'normal'
                    }
                },
                label: {
                    normal: {
                        formatter: "{d}%",
                        show: true,
                        fontSize:'20'
                    }
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['59%', '40%'],
                        data:singlePlanData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 5,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        });
        // 基于准备好的dom，初始化echarts实例
        var January = ECharts.init(document.getElementById('January'));
        
        January.showLoading();
        var February = ECharts.init(document.getElementById('February'));
        February.showLoading();
        var March = ECharts.init(document.getElementById('March'));
        March.showLoading();
        var April = ECharts.init(document.getElementById('April'));
        April.showLoading();
        var May = ECharts.init(document.getElementById('May'));
        May.showLoading();
        var June = ECharts.init(document.getElementById('June'));
        June.showLoading();
        var July = ECharts.init(document.getElementById('July'));
        July.showLoading();
        var August = ECharts.init(document.getElementById('August'));
        August.showLoading();
        var September = ECharts.init(document.getElementById('September'));
        September.showLoading();
        var October = ECharts.init(document.getElementById('October'));
        October.showLoading();
        var November = ECharts.init(document.getElementById('November'));
        November.showLoading();
        var December = ECharts.init(document.getElementById('December'));
        December.showLoading();
        
        
        Http.get(API.statisticsIndex+'?year='+e.target.value,data=>{
        	
            var workPlan = data.data.list[0];
            var record = data.data.list[1];
            var rectification = data.data.list[2];
            var report = data.data.list[3];

            January.hideLoading();
            
            
            January.setOption({
                title : {
                    text: '一月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[1],record[1],rectification[1],report[1]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            February.hideLoading();
            February.setOption({
                title : {
                    text: '二月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[2],record[2],rectification[2],report[2]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            March.hideLoading();
            March.setOption({
                title : {
                    text: '三月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[3],record[3],rectification[3],report[3]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            April.hideLoading();
            April.setOption({
                title : {
                    text: '四月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[4],record[4],rectification[4],report[4]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            May.hideLoading();
            May.setOption({
                title : {
                    text: '五月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[5],record[5],rectification[5],report[5]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            June.hideLoading();
            June.setOption({
                title : {
                    text: '六月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[6],record[6],rectification[6],report[6]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            July.hideLoading();
            July.setOption({
                title : {
                    text: '七月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[7],record[7],rectification[7],report[7]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            August.hideLoading();
            August.setOption({
                title : {
                    text: '八月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[8],record[8],rectification[8],report[8]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            September.hideLoading();
            September.setOption({
                title : {
                    text: '九月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[9],record[9],rectification[9],report[9]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            October.hideLoading();
            October.setOption({
                title : {
                    text: '十月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[10],record[10],rectification[10],report[10]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            November.hideLoading();
            November.setOption({
                title : {
                    text: '十一月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[11],record[11],rectification[11],report[11]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            December.hideLoading();
            December.setOption({
                title : {
                    text: '十二月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[12],record[12],rectification[12],report[12]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
        });
        
    	}
    	
    shouldComponentUpdate(){
    	return true
    }
    	
    	

    
    handleClickExitButtom = (e) =>{
        localStorage.isLogs = 0;
        browserHistory.push("/Login");
        //location.href = location.href
    };
    /*
    * 责任区统计  督学个人工作计划数量
    * */
    barList(data){
        var dataNoe = [];
        var dataTow = [];
        var dataThree = [];
        for(var i = 0 ; i < data.length ; i++){
            if(i < 11){
                dataNoe.push(data[i]);
            }else if(i >= 11 && i < 22){
                dataTow.push(data[i]);
            }else{
                dataThree.push(data[i]);
            }
        };

        // 基于准备好的dom，初始化echarts实例
        var myChartNoe = ECharts.init(document.getElementById('mainNow'));
        // 基于准备好的dom，初始化echarts实例
        var myChartTow = ECharts.init(document.getElementById('mainTow'));
        // 基于准备好的dom，初始化echarts实例
        var myChartThree = ECharts.init(document.getElementById('mainThree'));
        myChartNoe.hideLoading();
        myChartTow.hideLoading();
        myChartThree.hideLoading();
        // 绘制图表
        myChartNoe.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:[]
            },
            grid: {
                left: '-16%',
                right: '-4%',
                bottom:'0%',
                top:'0%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : []
                }
            ],
            series : [
                {
                    name:'利润',
                    type:'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            fontSize:'20'
                        }
                    },
                    data:dataNoe.reverse()
                }
            ]
        });
        // 绘制图表
        myChartTow.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:[]
            },
            grid: {
                left: '-16%',
                right: '-4%',
                bottom:'0%',
                top:'0%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : []
                }
            ],
            series : [
                {
                    name:'利润',
                    type:'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            fontSize:'20'
                        }
                    },
                    data:dataTow.reverse()
                }
            ]
        });
        // 绘制图表
        myChartThree.setOption({
            tooltip : {
                trigger: 'axis',
                axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            legend: {
                data:[]
            },
            grid: {
                left: '-16%',
                right: '-4%',
                bottom:'0%',
                top:'0%',
                containLabel: true
            },
            xAxis : [
                {
                    type : 'value'
                }
            ],
            yAxis : [
                {
                    type : 'category',
                    axisTick : {show: false},
                    data : []
                }
            ],
            series : [
                {
                    name:'利润',
                    type:'bar',
                    label: {
                        normal: {
                            show: true,
                            position: 'inside',
                            fontSize:'20'
                        }
                    },
                    data:dataThree.reverse()
                }
            ]
        });
    };
    
    

    componentDidMount(){
        // 基于准备好的dom，初始化echarts实例
        var myChartNoe = ECharts.init(document.getElementById('mainNow'));
        // 基于准备好的dom，初始化echarts实例
        var myChartTow = ECharts.init(document.getElementById('mainTow'));
        // 基于准备好的dom，初始化echarts实例
        var myChartThree = ECharts.init(document.getElementById('mainThree'));
        myChartNoe.showLoading();
        myChartTow.showLoading();
        myChartThree.showLoading();
        Http.get(API.statisticsRnspection,data=> {
            var planCount = [];
            var inspectionCount = [];
            var feedbackCount = [];
            var rectifyInformCount = [];
            for (var i = 0; i < data.data.list.length; i++) {
                planCount.push(data.data.list[i].planCount);
                inspectionCount.push(data.data.list[i].inspectionCount);
                feedbackCount.push(data.data.list[i].feedbackCount);
                rectifyInformCount.push(data.data.list[i].rectifyInformCount);
            }
            this.setState({
                planCount: planCount,
                inspectionCount: inspectionCount,
                feedbackCount: feedbackCount,
                rectifyInformCount: rectifyInformCount
            });
            this.barList(this.state.planCount)
        });
        // 基于准备好的dom，初始化echarts实例
        var theme = ECharts.init(document.getElementById('theme'));
        var singlePlan = ECharts.init(document.getElementById('singlePlan'));
        theme.showLoading();
        singlePlan.showLoading();
        Http.get(API.statisticsDetailcount,data=>{
            var dataTheme = data.data.list.theme;
            var DataSinglePlan = data.data.list.singlePlan;
            var singlePlanTitleData = [];
            var singlePlanData = [];
            var themeTitleData = [];
            var themeData = [];
            for(var i = 0 ; i < dataTheme.length ; i++){
                var obj = new Object();
                var planObj = new Object();
                planObj.value = DataSinglePlan[i].count;
                planObj.name = DataSinglePlan[i].actionPersonName;
                singlePlanTitleData.push(DataSinglePlan[i].actionPersonName);
                singlePlanData.push(planObj);
                obj.value = dataTheme[i].count;
                obj.name = dataTheme[i].themeName;
                themeData.push(obj);
                themeTitleData.push(dataTheme[i].themeName);
            };
            console.log(themeTitleData);
            theme.hideLoading();
            singlePlan.hideLoading();
            theme.setOption({
                title : {
                    text: '工作计划中的主题',
                    x:'67%',
                    y:'bottom',
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: themeTitleData,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'normal'
                    }
                },
                label: {
                    normal: {
                        formatter: "{d}%",
                        show: true,
                        fontSize: '24',
                    }
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['77%', '40%'],
                        data:themeData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        x:'100'
                    }
                ]
            });
            singlePlan.setOption({
                title : {
                    text: '个人工作记录最多的10位督学',
                    x:'25%',
                    y:'bottom',
                    textStyle: {
                        fontSize: '30',
                        fontWeight: 'normal'
                    }
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: singlePlanTitleData,
                    textStyle: {
                        fontSize: '20',
                        fontWeight: 'normal'
                    }
                },
                label: {
                    normal: {
                        formatter: "{d}%",
                        show: true,
                        fontSize:'20'
                    }
                },
                series : [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius : '55%',
                        center: ['59%', '40%'],
                        data:singlePlanData,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 5,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            });
        });
        // 基于准备好的dom，初始化echarts实例
        var January = ECharts.init(document.getElementById('January'));
        
        January.showLoading();
        var February = ECharts.init(document.getElementById('February'));
        February.showLoading();
        var March = ECharts.init(document.getElementById('March'));
        March.showLoading();
        var April = ECharts.init(document.getElementById('April'));
        April.showLoading();
        var May = ECharts.init(document.getElementById('May'));
        May.showLoading();
        var June = ECharts.init(document.getElementById('June'));
        June.showLoading();
        var July = ECharts.init(document.getElementById('July'));
        July.showLoading();
        var August = ECharts.init(document.getElementById('August'));
        August.showLoading();
        var September = ECharts.init(document.getElementById('September'));
        September.showLoading();
        var October = ECharts.init(document.getElementById('October'));
        October.showLoading();
        var November = ECharts.init(document.getElementById('November'));
        November.showLoading();
        var December = ECharts.init(document.getElementById('December'));
        December.showLoading();
        
        
        Http.get(API.statisticsIndex+'?year='+this.state.yValue,data=>{
        	
            var workPlan = data.data.list[0];
            var record = data.data.list[1];
            var rectification = data.data.list[2];
            var report = data.data.list[3];

            January.hideLoading();
            
            
            January.setOption({
                title : {
                    text: '一月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[1],record[1],rectification[1],report[1]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            February.hideLoading();
            February.setOption({
                title : {
                    text: '二月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[2],record[2],rectification[2],report[2]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            March.hideLoading();
            March.setOption({
                title : {
                    text: '三月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[3],record[3],rectification[3],report[3]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            April.hideLoading();
            April.setOption({
                title : {
                    text: '四月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[4],record[4],rectification[4],report[4]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            May.hideLoading();
            May.setOption({
                title : {
                    text: '五月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[5],record[5],rectification[5],report[5]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            June.hideLoading();
            June.setOption({
                title : {
                    text: '六月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[6],record[6],rectification[6],report[6]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            July.hideLoading();
            July.setOption({
                title : {
                    text: '七月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[7],record[7],rectification[7],report[7]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            August.hideLoading();
            August.setOption({
                title : {
                    text: '八月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[8],record[8],rectification[8],report[8]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            September.hideLoading();
            September.setOption({
                title : {
                    text: '九月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[9],record[9],rectification[9],report[9]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            October.hideLoading();
            October.setOption({
                title : {
                    text: '十月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[10],record[10],rectification[10],report[10]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            November.hideLoading();
            November.setOption({
                title : {
                    text: '十一月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[11],record[11],rectification[11],report[11]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
            December.hideLoading();
            December.setOption({
                title : {
                    text: '十二月',
                    x:'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {
                        type : 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : [],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value'
                    }
                ],
                series : [
                    {
                        name:'直接访问',
                        type:'bar',
                        barWidth: '60%',
                        data:[workPlan[12],record[12],rectification[12],report[12]],
                        itemStyle: {
                            normal: {
                                color: function(params) {
                                    // build a color map as your need.
                                    var colorList = ['orange','yellow','pink','green'];
                                    return colorList[params.dataIndex]
                                }
                            }
                        }
                    }
                ]
            });
        });

    };

    /*
    * 责任区信息切换 督学个人工作计划数量
    * */
    handleClickPlan = () =>{
        if(this.state.planCountNav){
            return
        };
        this.barList(this.state.planCount);
        this.setState({
            planCountNav:true,
            inspectionCountNav:false,
            feedbackCountNav:false,
            rectifyInformCountNav:false
        });
    };
    /*
    * 责任区信息切换 随访检查记录
    * */
    handleClickInspection = () => {
        if(this.state.inspectionCountNav){
            return
        };
        this.barList(this.state.inspectionCount);
        this.setState({
            planCountNav:false,
            inspectionCountNav:true,
            feedbackCountNav:false,
            rectifyInformCountNav:false
        });
    };
    /*
    * 责任区信息切换 工作情况反馈数量
    * */
    handleClickFeedback = () =>{
        if(this.state.feedbackCountNav){
            return
        };
        this.barList(this.state.feedbackCount);
        this.setState({
            planCountNav:false,
            inspectionCountNav:false,
            feedbackCountNav:true,
            rectifyInformCountNav:false
        });
    };
    /*
    * 责任区信息切换 整改通知数量
    * */
    handleClickRectifyInform = () =>{
        if(this.state.rectifyInformCountNav){
            return
        };
        this.barList(this.state.rectifyInformCount);
        this.setState({
            planCountNav:false,
            inspectionCountNav:false,
            feedbackCountNav:false,
            rectifyInformCountNav:true
        });
    };



    render() {
        console.log(this.state)
        return(
            <div style={{backgroundColor:'#2a3542'}}>
                <div className={styles.DDtitle}>
                    <div className={styles.DDTitleLeft}>
                        <img src={IMG.favicon} />东莞教育督导平台统计信息后台
                    </div>

                </div>
                <div style={{height:'1000px',padding:'0 40px'}}>
                    <div className={styles.DDNavigationNoe}>
                        <h3><img src={IMG.classify} style={{margin:'10px 30px 10px 0'}} />责任区统计</h3>
                        <ul style={{float: 'left',listStyle:'none',margin:'0px',padding:'0px'}}>
                            <li onClick={this.handleClickPlan} className={this.state.planCountNav?styles.navLi:""} >督学个人工作计划数量</li>
                            <li onClick={this.handleClickInspection} className={this.state.inspectionCountNav?styles.navLi:""}>随访检查记录</li>
                            <li onClick={this.handleClickFeedback} className={this.state.feedbackCountNav?styles.navLi:""}>工作情况反馈数量</li>
                            <li onClick={this.handleClickRectifyInform} className={this.state.rectifyInformCountNav?styles.navLi:""}>整改通知数量</li>
                        </ul>
                    </div>
                    <div style={{height:'860px',backgroundColor:'#ffffff',padding:'20px 0',borderTopLeftRadius:'20px',borderBottomLeftRadius:'20px',borderBottomRightRadius:'20px'}}>
                        <div className={styles.DDHistogram}>
                            <ul style={{listStyle:'none',padding:'0 0 0 35px',float:'left'}}>
                                <li>第一责任区</li>
                                <li>第二责任区</li>
                                <li>第三责任区</li>
                                <li>第四责任区</li>
                                <li>第五责任区</li>
                                <li>第六责任区</li>
                                <li>第七责任区</li>
                                <li>第八责任区</li>
                                <li>第九责任区</li>
                                <li>第十责任区</li>
                                <li>第十一责任区</li>
                            </ul>
                            <div id='mainNow' style={{width:'397px',height:'820px',float:'left'}}></div>
                        </div>
                        <div className={styles.DDHistogram}>
                            <ul style={{listStyle:'none',padding:'0 0 0 35px',float:'left'}}>
                                <li>第十二责任区</li>
                                <li>第十三责任区</li>
                                <li>第十四责任区</li>
                                <li>第十五责任区</li>
                                <li>第十六责任区</li>
                                <li>第十七责任区</li>
                                <li>第十八责任区</li>
                                <li>第十九责任区</li>
                                <li>第二十责任区</li>
                                <li>第二十一责任区</li>
                                <li>第二十二责任区</li>
                            </ul>
                            <div id='mainTow' style={{width:'397px',height:'820px',float:'left'}}></div>
                        </div>
                        <div className={styles.DDHistogram}>
                            <ul style={{listStyle:'none',padding:'0 0 0 35px',float:'left'}}>
                                <li style={{height:''}}>第二十三责任区</li>
                                <li>第二十四责任区</li>
                                <li>第二十五责任区</li>
                                <li>第二十六责任区</li>
                                <li>第二十七责任区</li>
                                <li>第二十八责任区</li>
                                <li>第二十九责任区</li>
                                <li>第三十责任区</li>
                                <li>第三十一责任区</li>
                            </ul>
                            <div id='mainThree' style={{width:'397px',height:'674px',float:'left'}}></div>
                        </div>
                    </div>
                </div>
                <div className={styles.DDModuleForter}></div>
                <div style={{height:'710px',padding:'0 40px'}}>
                    <div className={styles.DDNavigationNoe}>
                        <h3><img src={IMG.classify} style={{margin:'10px 30px 10px 0'}} />细节统计</h3>
                    </div>
                    <div style={{height:'570px',backgroundColor:'#ffffff',padding:'20px 0 20px 20px',borderRadius:"20px"}}>
                        <div id='theme' style={{height:'532px',width:'1232px',float:'left'}}></div>
                        <div id='singlePlan' style={{height:'532px',width:'568px',float:'left'}}></div>
                    </div>
                </div>
                <div className={styles.DDModuleForter}></div>
                
                
                <div style={{height:'940px',padding:'0 40px'}}>
                    <div className={styles.DDNavigationNoe}>
                        <h3><img src={IMG.classify} style={{margin:'10px 30px 10px 0'}} />月度统计</h3>
                    </div>
                    
                    
                    <select onChange={this.setYear}>
                    	<option  value='2017'>2017年</option>
                    	<option value='2018' selected>2018年</option>
                    </select>

                    
                    <div style={{height:'800px',backgroundColor:'#ffffff',padding:'20px 20px',borderRadius:"20px"}}>
                        <h3 style={{height:'100px',lineHeight:'100px',color:'#561a1a',fontSize:'30px',fontWeight:'bold'}}>橙色:督学个人工作计划  黄色:随访检查记录  粉色:整改通知  绿色:整改情况</h3>
                        <div id="January" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="February" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="March" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="April" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="May" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="June" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="July" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="August" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="September" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="October" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="November" style={{width:'290px',height:'340px',float:'left'}}></div>
                        <div id="December" style={{width:'290px',height:'340px',float:'left'}}></div>
                    </div>
                </div>
            </div>
        )
    }


};


